<template>
  <div class="w-100 h-100">
    <div
      style="width: 100; height: 10%"
      class="d-flex justify-content-end"
    ></div>
    <div class="bottom">
      <div id="zhi3" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { useOptions } from "@/hook/useOptions";

const colorSingleList = ["rgba(3, 230, 254, 1)", "rgba(184, 235, 143, 1)"];
const props = defineProps({
  selectValue: {
    type: Number,
    default: 0,
  },
  echartsData: {
    type: Array,
    default: () => [],
  },
});

const value = ref(0);
const current = computed(() => {
  
  let data = [];
  try {
    data = props.echartsData[props.selectValue];
  } catch (error) {}

  return data;
});
let myChart: any;

watch(
  () => current.value,
  (val) => {
    console.log(val,'valva23');
    
    if (val) {
      // myChart.setOption({

      // });
      setOption(val)
    }
  }
);
const setOption=(trafficWaydata:any)=>{
  let labellist=["裸地","城市路面","绿地","屋面","硬质辅装","水域"]
  let colorlist=["#fd566a","#9787ff","#fdb36a","#6da7ff","#63e1f2","#ff3000"]
  let trafficWay=trafficWaydata.map((item:any,index:any)=>{
    return {
      name: labellist[index],
      value: item,
      color: colorlist[index],
    }
  })
  var data = [];
  var color = [
    "#fd566a",
    "#9787ff",
    "#fdb36a",
    "#fdd56a",
    "#6da7ff",
    "#63e1f2",
    "#ff3000",
  ];
  for (var i = 0; i < trafficWay.length; i++) {
    data.push(
      {
        value: trafficWay[i].value,
        name: labellist[i],
        label: {
          color:'#fff'
                  // color: color[i],彩色文字
          },
        itemStyle: {
          normal: {
            borderWidth: 5,
            shadowBlur: 20,
            borderColor: color[i],
            shadowColor: color[i],
          },
          
        },
      },
      {
        value: 2,
        name: "",
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            color: "rgba(0, 0, 0, 0)",
            borderColor: "rgba(0, 0, 0, 0)",
            borderWidth: 0,
          },
        },
      }
    );
  }
  var seriesOption = [
    {
      name: "",
      type: "pie",
      clockWise: false,
      radius: [85, 89],
      hoverAnimation: false,
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: "outside",
            // color: "#000",

            fontSize: 18,
            // formatter: (params: any) => {
            //   var total = 0;
            //   for (var i = 0; i < trafficWay.length; i++) {
            //     total += trafficWay[i].value;
            //   }
            //   const percent = ((params.data.value / 200) * 100).toFixed(2); // 假设总值为200
            //   return `${params.name}\n${total}立方米(${percent}%)`;
            // },
        
            formatter: function (params: any) {
              var percent: any = 0;
              var total = 0;
              for (var i = 0; i < trafficWay.length; i++) {
                total += trafficWay[i].value;
              }
              percent = ((params.value / total) * 100).toFixed(0);
              if (params.name !== "") {
                   return `${params.name}\n${total}立方米(${percent}%)`;
              } else {
                return "";
              }
            },
    
          },
          labelLine: {
            length: 30,
            length2: 30,
            show: true,
            color: "#fff",
          },
        },
      },
      data: data,
    },
  ];
  let option=myChart1.getOption()
  option.title[1].text=trafficWaydata.reduce((p:any,v:any)=>p+v,0)
  option.series=seriesOption
  myChart1.setOption(option);
}
let myChart1: any
onMounted(() => {
  var color = [
    "#fd566a",
    "#9787ff",
    "#fdb36a",
    "#fdd56a",
    "#6da7ff",
    "#63e1f2",
    "#ff3000",
  ];

  let option = {
    background: "transparent",
    color: color,
    title: [
      {
        text: "总体积(万立方米)",
        top: "53%",
        textAlign: "center",
        left: "50%",
        textStyle: {
          color: "#fff",
          fontSize: 20,
          fontWeight: "400",
        },
      },
      {
        top: "40%",
        textAlign: "center",
        left: "48%",
        textStyle: {
          color: "#fff",
          fontSize: 25,
          fontWeight: "800",
          fontStyle: "italic",
        },
      },
    ],
    graphic: {
      elements: [
        {
          type: "image",
          z: 3,
          style: {
            // image: img,
            width: 178,
            height: 178,
          },
          left: "center",
          top: "center",
          position: [100, 100],
        },
      ],
    },
    tooltip: {
      show: false,
    },

    toolbox: {
      show: false,
    },
    series: {}
  };

   myChart1 = echarts.init(document.getElementById("zhi3") as HTMLElement);
  myChart1.setOption(option);
});
</script>

<style lang="less" scoped>
.bottom {
  width: 100%;
  height: 84%;
  display: flex;
}
</style>
